<DocumentFragment>
  <div
    class="ant-app"
  >
    <div>
      test
    </div>
    <div
      class="ant-descriptions ant-pro-descriptions"
      tooltip="包含了从服务器请求，columns等功能"
    >
      <div
        class="ant-descriptions-header"
      >
        <div
          class="ant-descriptions-title"
        >
          <div
            class="ant-pro-core-label-tip"
          >
            <div
              class="ant-pro-core-label-tip-title"
            >
              高级定义列表
            </div>
            <span
              aria-describedby="test-id"
              class="ant-pro-core-label-tip-icon"
            >
              <span
                aria-label="info-circle"
                class="anticon anticon-info-circle"
                role="img"
              >
                <svg
                  aria-hidden="true"
                  data-icon="info-circle"
                  fill="currentColor"
                  focusable="false"
                  height="1em"
                  viewBox="64 64 896 896"
                  width="1em"
                >
                  <path
                    d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                  />
                  <path
                    d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
                  />
                </svg>
              </span>
            </span>
          </div>
        </div>
        <div
          class="ant-descriptions-extra"
        >
          <button
            class="ant-btn ant-btn-primary ant-btn-color-primary ant-btn-variant-solid"
            type="button"
          >
            <span>
              提 交
            </span>
          </button>
        </div>
      </div>
      <div
        class="ant-descriptions-view"
      >
        <table>
          <tbody>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="2"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    文本
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0; max-width: 80%;"
                  >
                    <span
                      aria-describedby="test-id"
                      class="ant-typography ant-typography-ellipsis ant-typography-ellipsis-single-line"
                      style="width: 100%; margin: 0px; padding: 0px;"
                      title=""
                    >
                      这是一段很长很长超级超级长的无意义说明文本并且重复了很多没有意义的词语，就是为了让它变得很长很长超级超级长这是一段很长很长超级超级长的无意义说明文本并且重复了很多没有意义的词语，就是为了让它变得很长很长超级超级长
                    </span>
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    <div
                      class="ant-pro-core-label-tip"
                    >
                      <div
                        class="ant-pro-core-label-tip-title"
                      >
                        金额
                      </div>
                      <span
                        aria-describedby="test-id"
                        class="ant-pro-core-label-tip-icon"
                      >
                        <span
                          aria-label="info-circle"
                          class="anticon anticon-info-circle"
                          role="img"
                        >
                          <svg
                            aria-hidden="true"
                            data-icon="info-circle"
                            fill="currentColor"
                            focusable="false"
                            height="1em"
                            viewBox="64 64 896 896"
                            width="1em"
                          >
                            <path
                              d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
                            />
                            <path
                              d="M464 336a48 48 0 1096 0 48 48 0 10-96 0zm72 112h-48c-4.4 0-8 3.6-8 8v272c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V456c0-4.4-3.6-8-8-8z"
                            />
                          </svg>
                        </span>
                      </span>
                    </div>
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    <span>
                      ¥100.00
                    </span>
                  </span>
                </div>
              </td>
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    百分比
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    <span>
                      100.00%
                    </span>
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    选择框
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    <span
                      class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
                    >
                      <span
                        class="ant-badge-status-dot ant-badge-status-error"
                      />
                      <span
                        class="ant-badge-status-text"
                      >
                        未解决
                      </span>
                    </span>
                  </span>
                </div>
              </td>
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    远程选择框
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    closed
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    进度条
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    <div
                      aria-valuemax="100"
                      aria-valuemin="0"
                      aria-valuenow="40"
                      class="ant-progress ant-progress-status-active ant-progress-line ant-progress-line-align-end ant-progress-line-position-outer ant-progress-show-info ant-progress-small"
                      role="progressbar"
                      style="min-width: 100px; max-width: 320px;"
                    >
                      <div
                        class="ant-progress-outer"
                        style="width: 100%;"
                      >
                        <div
                          class="ant-progress-inner"
                        >
                          <div
                            class="ant-progress-bg ant-progress-bg-outer"
                            style="width: 40%; height: 6px; --progress-percent: 0.4;"
                          />
                        </div>
                        <span
                          class="ant-progress-text ant-progress-text-end ant-progress-text-outer"
                          title="40%"
                        >
                          40%
                        </span>
                      </div>
                    </div>
                  </span>
                </div>
              </td>
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    日期时间
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    2016-11-22 15:22:44
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    日期
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    2016-11-22
                  </span>
                </div>
              </td>
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    日期区间
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    <div
                      style="display: flex; flex-wrap: wrap; gap: 8px; align-items: center;"
                    >
                      <div>
                        2016-11-21 15:22:44
                      </div>
                      <div>
                        2016-11-22 15:22:44
                      </div>
                    </div>
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    时间
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    <span>
                      15:22:44
                    </span>
                  </span>
                </div>
              </td>
              <td
                class="ant-descriptions-item"
                colspan="1"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    代码块
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    <pre
                      0.1=""
                      150=""
                      3px=""
                      background-color:=""
                      border-radius:=""
                      consolas=""
                      courier=""
                      liberation=""
                      menlo=""
                      min-content=""
                      mono=""
                      monospace=""
                      rgba=""
                      sfmono-regular=""
                      style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; color: rgba(0, 0, 0, 0.65); font-family: "
                      width:=""
                    >
                      <code>
                        
yarn run v1.22.0
$ eslint --format=pretty ./packages
Done in 9.70s.
          
                      </code>
                    </pre>
                  </span>
                </div>
              </td>
            </tr>
            <tr
              class="ant-descriptions-row"
            >
              <td
                class="ant-descriptions-item"
                colspan="2"
              >
                <div
                  class="ant-descriptions-item-container"
                >
                  <span
                    class="ant-descriptions-item-label"
                  >
                    JSON 代码块
                  </span>
                  <span
                    class="ant-descriptions-item-content"
                    style="min-width: 0;"
                  >
                    <pre
                      0.1=""
                      150=""
                      3px=""
                      background-color:=""
                      border-radius:=""
                      consolas=""
                      courier=""
                      liberation=""
                      menlo=""
                      min-content=""
                      mono=""
                      monospace=""
                      rgba=""
                      sfmono-regular=""
                      style="padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; color: rgba(0, 0, 0, 0.65); font-family: "
                      width:=""
                    >
                      <code>
                        {
  "compilerOptions": {
    "target": "esnext",
    "moduleResolution": "node",
    "jsx": "preserve",
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "declaration": true,
    "skipLibCheck": true
  },
  "include": [
    "**/src",
    "**/docs",
    "scripts",
    "**/demo",
    ".eslintrc.js"
  ]
}
                      </code>
                    </pre>
                  </span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</DocumentFragment>